<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<uv-skeletons :loading="pageLoading" :skeleton="skeleton"></uv-skeletons>
	<template v-if="!pageLoading">
		<view class="teamDetails-head">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
				<swiper-item class="swiper-img-item" v-for="(item,index) in groupInfo.imageList"
					@click="previewImage(groupInfo.imageList,index)" :key="index">
					<image :src="item" class="img-item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="content-code" @click="showCode(groupInfo.verification_code)"
				v-if="groupInfo.verification_code">
				<view class="text-box flex-center">
					<text class="text">签到码</text>
				</view>
				<image src="../static/code-icon.png" class="code" mode=""></image>
			</view>
		</view>
		<view class="main">
			<!-- 组队信息 -->
			<view class="teamDetails-info">
				<!-- 倒计时 -->
				<countdownItemVue :status="groupInfo.customStatus" :startDate="groupInfo.start_date"
					:endDate="groupInfo.end_date" @changeTime="changeTime"></countdownItemVue>
				<view class="separation"></view>
				<!-- 队长信息 -->
				<view class="captain-info flex-row-center" v-if="groupInfo.captain_info">
					<image :src="groupInfo.captain_info.avatar" class="ava" mode="aspectFill"></image>
					<text class="captain-name">{{groupInfo.captain_info.nickname}}</text>
					<image src="@/static/user/captain_sign.png" class="captain_sign" mode=""></image>
					<image :src="groupInfo.captain_info.vip_icon" class="vip_icon" mode=""></image>
					<text class="lv-name">{{groupInfo.captain_info.vip_name}}</text>
				</view>
			</view>
			<!-- 地址信息 -->
			<view class="address-info-box" @click="openMap(groupInfo.lat,groupInfo.long)">
				<image src="@/page_main/static/address_bg.png" class="address-bg" mode=""></image>
				<view class="address-info flex-row-center">
					<view class="address-left flex">
						<view class="address-icon">
							<up-icon name="map" color="#B8DED0" size="28rpx"></up-icon>
						</view>
						<view class="address-box flex">
							<text class="address">{{groupInfo.address}}</text>
							<text class="distance">距离你{{groupInfo.juli}}km</text>
						</view>
					</view>
					<image src="@/page_main/static/address-btn.png" class="address-btn" mode=""></image>
				</view>
			</view>

		</view>
		<view class="content-box w100">
			<!-- tabList -->
			<view class="tab-box">
				<up-tabs :activeStyle="{
				'fontWeight': 'bold',
				'fontSize': '30rpx',
				'color': '#fff'
			}" lineColor="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" :inactiveStyle="{
			 	'fontWeight': 500,
			 	'fontSize': '30rpx',
			 	'color': '#9A9B9C'
			 }" :list="tabList" :current="tabIndex" @change="changeTab"></up-tabs>
			</view>

			<!-- 内容 -->
			<view class="tab-content">
				<swiper class="swiper-content" @change="changeSwiper" :current="tabIndex">
					<!-- 详情 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">

							<view class="teamDetails-content-item">
								<!-- 		<view class="teamDetails-img">
							<image src="/static/user/vip_bg.png" @click="previewImage(imgList,index)" v-for="(num,index) in 5"
								:key="num" class="img" mode="aspectFill">
							</image>
						</view> -->
								<text class="title">组队名称：{{groupInfo.title}}</text>
								<text class="text-description"
									v-if="groupInfo.startDate&&groupInfo.startDate">组队时间：{{groupInfo.startDate}} ~
									{{groupInfo.endDate}}</text>
								<text class="text-description">组队情况：{{groupInfo.join_number}} /
									{{groupInfo.number_people}}</text>
								<text class="text-description">组队简介：{{groupInfo.describe}}</text>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 人员 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="teamDetails-content-item">
								<template v-if="personneInfo.list.length>0">
									<view class="personner-item" v-for="(item,index) in personneInfo.list"
										:key="item.user_id">
										<personnelItemVue :personneInfo="item"></personnelItemVue>
									</view>
									<view class="view-more" @click='morePersonne()'>
										<up-loadmore :status="personneInfo.status" />
									</view>
								</template>
								<view class="not-list-view" v-else>
									<text class="text">该组队暂无参与人员哦~</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 评论 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="getMoreComment">
							<view class="teamDetails-item-review">
								<template v-if="commentInfo.list.length>0">
									<reviewItemVue @delComment="delComment" :commentInfo="item"
										v-for="(item,index) in commentInfo.list" :key="item.id">
									</reviewItemVue>
									<view class="view-more" @click='getMoreComment'>
										<up-loadmore :status="commentInfo.status" />
									</view>
								</template>
								<view class="not-list-view" v-else>
									<text class="text">该组队还没评论哦~</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>

			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer-box">
			<view class="footer-content flex-row-center">
				<view class="footer-left flex-row-center">
					<view class="share-box flex-center" @click="toShare">
						<up-icon name="share-fill" color="#DEDEDE" size="32rpx"></up-icon>
						<text class="text">分享</text>
					</view>
					<view class="share-box marl flex-center" @click="writeoff" v-if="groupInfo.isCaptain_diy==1">
						<up-icon name="scan" color="#DEDEDE" size="32rpx"></up-icon>
						<text class="text">核销</text>
					</view>
				</view>
				<view class="footer-right flex-row-center">
					<view class="price-box">
						<text class="icon">￥</text>
						<text class="price">{{groupInfo.cost}}</text>
						<text class="unit">/人</text>
					</view>
					<template>
						<view class="team-btn-nostart flex-center" @click="toLogin" v-if="!userInfo">
							<text class="btn-text">立即登录</text>
						</view>
						<!-- 已结束 -->
						<template v-else-if="groupInfo.customStatus==2">
							<!-- 我是队长，确认组队 -->
							<template v-if="groupInfo.isCaptain_diy==1">
								<view class="team-btn-nostart flex-center" v-if="groupInfo.confirm==1">
									<text class="btn-text">已确认</text>
								</view>
								<view class="team-btn flex-center" @click="toConfirm" v-else>
									<text class="btn-text">确认组队</text>
								</view>
							</template>
							<view class="team-btn-nostart flex-center" v-else>
								<text class="btn-text">已结束</text>
							</view>
						</template>
						<view class="team-btn flex-center" @click="()=>commentShow=true"
							v-else-if="groupInfo.ordered==1">
							<text class="btn-text">参与评论</text>
						</view>
						<view class="team-btn-nostart flex-center" v-else-if="groupInfo.customStatus==1">
							<text class="btn-text">已开始</text>
						</view>
						<view class="team-btn-nostart flex-center" v-else-if="groupInfo.isFull_diy==1">
							<text class="btn-text">已满员</text>
						</view>
						<template v-else>
							<view class="team-btn-free flex-center" @click="toTeamShow" v-if="groupInfo.type==1">
								<text class="btn-text">免费参与</text>
							</view>
							<view class="team-btn flex-center" @click="toTeamShow" v-else>
								<text class="btn-text">参与组队</text>
							</view>
						</template>


					</template>
				</view>
			</view>
		</view>
		<!-- 弹出组队 -->
		<up-popup :show="teamShow" @close="closeteamShow" round="18rpx" closeable mode="bottom">
			<view class="choose-sign flex w100">
				<text class="title">选择组队名片</text>
				<template v-if="signlist.length>0">
					<view class="choose-content W100">
						<scroll-view scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="getMoreStore">
							<view class="sign-item flex-row-center W100" v-for="(item,index) in signlist" :key="item.id"
								@click="changeSignId(item.id)">
								<view class="personnel-left">
									<view class="radio-box-active flex-center" v-if="signInfo.signId==item.id">
										<up-icon name="checkbox-mark" color="#0A534F" size="28rpx"></up-icon>
									</view>
									<view class="radio-box" v-else></view>
								</view>
								<view class="personnel-right">
									<view class="personnel-head flex-row-center">
										<view class="name-box flex-row-center">
											<text class="name">{{item.real_name}}</text>
											<template>
												<up-icon name="man" v-if="item.gender==1" color="#2979ff"
													size="28rpx"></up-icon>
												<up-icon name="woman" v-if="item.gender==2" color="#F8BBC4"
													size="28rpx"></up-icon>
											</template>
										</view>
										<view class="status-box flex-center" v-if="item.default">
											<text class="TEXT">默认</text>
										</view>
									</view>
									<text class="phone" v-if="item.newMobile">联系方式：{{item.newMobile}}</text>
									<text class="phone" v-else>联系方式：{{item.mobile}}</text>
								</view>
							</view>
							<view class="add_box flex-center" @click="addSign">
								<up-icon name="plus" color="#7CDEC7" size="24rpx"></up-icon>
								<text class="text">新增名片</text>
							</view>
						</scroll-view>
					</view>
					<view class="choseSign-footer w100 flex-row-center">
						<choosePayVue :payType="signInfo.payType" @changePayType="changePayType" style="width: 100%;">
						</choosePayVue>
						<view class="agreement-box flex-center">
							<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx"
								label="已阅读并同意" activeColor="#8BDEB7" @change="changeChecked" name="agree"
								:checked="checked">
							</up-checkbox>
							<view class="content flex-row-center">
								<text class="agreement-name" @click="toProtocol(3)">《支付协议》</text>
							</view>
						</view>
						<view class="choseSign-footer-btn w100 flex-center">
							<!-- 	<view class="add_box flex-center" @click="addSign">
								<up-icon name="plus" color="#7CDEC7" size="26rpx"></up-icon>
								<text class="text">新增名片</text>
							</view> -->
							<up-button :text="payBtntext" @click="submitTeam" loadingText="提交中"
								:customStyle="{'color':'#115B56',height:'68rpx',width:'480rpx',margin:'0'}"
								:loading="signInfo.loading"
								color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"
								shape="circle"></up-button>
						</view>
					</view>
				</template>
				<view class="not-list-view" v-else>
					<text class="text">暂未添加名片信息~</text>
					<text class="btn" style="margin-left: 8rpx;" @click="addSign">立即添加</text>
				</view>
			</view>
		</up-popup>
		<!-- 分享弹窗 -->
		<up-popup round="18rpx" :show="shareShow" bgColor='#222528' @close="closeShare" :closeOnClickOverlay="false"
			mode="bottom">
			<sharePopupVue ref="sharePopup" :groupInfo="groupInfo" @closeShare="closeShare" @shareWechat="shareWechat">
			</sharePopupVue>
		</up-popup>
		<!-- 评论弹窗 -->
		<up-popup round="18rpx" :closeable="true" :show="commentShow" bgColor='#222528' @close="closeComment"
			:closeOnClickOverlay="false" mode="bottom">
			<commentItemVue :groupInfo="groupInfo" @closeComment="closeComment"></commentItemVue>
		</up-popup>
		<!-- 核销码 -->
		<up-popup :show="signCodePop" closeable :safeAreaInsetBottom="false" round="18rpx" bgColor="#191c1F"
			mode="center" @close="closesignCode">
			<view class="signCode-box flex-row-center">
				<text class="title">门店核销码</text>
				<view class="code-box w100 flex-center">
					<up-qrcode ref="upCode" :size="220" :val="signCode"></up-qrcode>
				</view>
				<view class="option-box flex-row-center w100">
					<view class="option-btn flex-center" @click="saveCode">
						<text class="text">保存</text>
					</view>
				</view>
			</view>
		</up-popup>
	</template>

</template>

<script setup>
	import countdownItemVue from '../components/countdownItem.vue';
	import personnelItemVue from "../components/personnelItem.vue";
	import reviewItemVue from "../components/reviewItem.vue";
	import joinTeamVue from "../components/joinTeam.vue";
	import sharePopupVue from "../components/sharePopup.vue";
	import commentItemVue from '../components/commentItem.vue';
	import choosePayVue from '@/components/choosePay/choosePay.vue';
	import {
		groupNotification
	} from '@/utils/groupNotification';
	import {
		getLocationInf
	} from '@/utils/getLocation.js';
	import {
		formatDate,
		isMillisecondTimestamp,
		compareTime,
		maskPhoneNumber,
		parseURLParams3
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		inviteInfoStore
	} from '@/stores/inviteInfo';
	import {
		usePay
	} from '@/hooks/usePay.js';
	const {
		appPay
	} = usePay();
	const sharePopup = ref(null);
	const pageLoading = ref(true);
	const skeleton = [{
			type: 'custom',
			style: 'width: 750rpx;height:478rpx;'
		},
		{
			type: 'line',
			num: 1,
			style: 'margin: 24rpx auto;width:680rpx;'
		}, {
			type: 'flex',
			style: 'width:680rpx;margin:24rpx auto;',
			children: [{
				type: 'avatar',
				num: 1,
				style: 'marginRight: 10rpx;width: 48rpx;height: 48rpx;'
			}, {
				type: 'line',
				num: 1,
				style: 'marginRight: 10rpx;height: 48rpx;'
			}]
		},
		{
			type: 'custom',
			style: 'width: 680rpx;height:120rpx;border-radius:12rpx;margin: 18rpx auto;'
		},
		{
			type: 'flex',
			style: 'margin:24rpx 0;marginLeft:35rpx;',
			children: [{
				type: 'line',
				style: 'width: 48rpx;marginRight:24rpx;'
			}, {
				type: 'line',
				style: 'width: 48rpx;marginRight:24rpx;'
			}, {
				type: 'line',
				style: 'width: 48rpx;'
			}]
		},
		{
			type: 'flex',
			style: 'width:680rpx;margin:24rpx auto;',
			children: [{
				type: 'line',
				num: 3,
				gap: '20rpx',
				style: ['width: 680rpx;marginBottom: 12rpx;', 'width: 680rpx;marginBottom: 12rpx;',
					'width: 280rpx;'
				],
			}]
		}
	]
	const userStore = userInfoStore();
	const inviteStore = inviteInfoStore();

	let tabChooseList = [0]; //已加载的tab
	const tabIndex = ref(0);
	const signlist = ref([]);
	const orderInfo = ref(null);
	const checked = ref(false);
	const signInfo = reactive({
		signId: 0,
		loading: false,
		payType: "wechat"
	});
	const teamShow = ref(false);
	const shareShow = ref(false);
	const commentShow = ref(false);
	const signCodePop = ref(false);
	const signCode = ref('');
	const upCode = ref(null);
	const payBtntext = ref('确定'); //参与组队文字
	const addressInfo = ref(computed(() => userStore.addressInfo));
	const userInfo = ref(computed(() => userStore.userInfo));
	const groupInfo = ref({
		groupId: 0,
		address: "",
		title: '',
		describe: '',
		imageList: [],
		startDate: '',
		endDate: '',
		cost: 0.00,
		customStatus: 0, //自定义组队状态 0 未开始 1开始 2已结束
		start_date: 0,
		end_date: 0,
		mpCode: '', //小程序二维码地址
		isCaptain_diy: 0, //前端定义是否队长
		isFull_diy: 0, //前端定义的是否满员
	});
	const commentInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	});
	const personneInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	})
	const inviteCode = ref(''); //推广码
	const tabList = [{
			name: '详情'
		},
		{
			name: '人员'
		},
		{
			name: '评论'
		}
	]
	onLoad(async (option) => {
		console.log('teamDetails分享参数', option);

		if (option.id) {
			groupInfo.value.groupId = option.id;
			if (userStore.addressInfo) {
				getGroupDetail(option.id);
			} else {
				uni.showLoading({
					title: '获取定位中'
				})
				const res = await getLocationInf()
				if (res.address) {
					setTimeout(() => {
						uni.hideLoading()
					}, 600);
					userStore.addressInfo = res;
					getGroupDetail(option.id);
				}
			}
		}
		if (option.i && option.t) {
			inviteStore.setInviteInfo(option.i, option.t);
			// inviteCode.value = option.i;
		}
		if (option.scene) { //小程序码分享
			let url = '?' + decodeURIComponent(option.scene);
			let parameter = parseURLParams3(url);
			inviteStore.setInviteInfo(parameter.i, parameter.t);
			groupInfo.value.groupId = parameter.id;
			if (userStore.addressInfo) {
				getGroupDetail(parameter.id);
			} else {
				uni.showLoading({
					title: '获取定位中'
				})
				const res = await getLocationInf()
				if (res.address) {
					setTimeout(() => {
						uni.hideLoading()
					}, 600);
					userStore.addressInfo = res;
					getGroupDetail(parameter.id);
				}
			}
		}
	});
	onMounted(() => {
		uni.$on('addSign', (data) => {
			// console.log('监听到事件来自 addSign ，携带参数 msg 为：', data);
			if (data.type) {
				getSignList();
			}
		})
	});
	onUnload(() => {
		uni.$off('addSign');
	})
	onPullDownRefresh(() => {
		// pageLoading.value = true;
		uni.showLoading({
			title: '刷新中'
		})
		tabChooseList = [0];
		tabIndex.value = 0;
		commentInfo.list = [];
		commentInfo.status = 'loadmore';
		commentInfo.pageSize = 1;
		getGroupDetail(groupInfo.value.groupId);
	});
	const getGroupDetail = async (id) => { //获取组队详情
		const res = await $Api.group.getGroupDetail({
			id,
			lat: addressInfo.value.latitude,
			lng: addressInfo.value.longitude
		})
		if (res.code == 1) {
			let {
				data
			} = res;
			setTimeout(() => {
				uni.hideLoading();
				uni.stopPullDownRefresh()
				pageLoading.value = false;
			}, 800);
			if (data.type && data.type == 1) {
				payBtntext.value = `确认（￥0.00）`
			} else {
				payBtntext.value = `确定（￥${data.cost})`
			}
			let imageList = [];
			if (res.data.image) {
				imageList = res.data.image.split(',')
			}
			if (res.data.juli) {
				res.data.juli = parseFloat(res.data.juli).toFixed(2)
			}
			if (res.data.captain && res.data.captain == userInfo.value?.user_id) { //判断是否是队长
				groupInfo.value.isCaptain_diy = 1;
			}
			if (res.data.join_number >= res.data.number_people) { //判断是否满员
				groupInfo.value.isFull_diy = 1;
			}
			// 判断状态
			if (data.start_date && data.end_date) {
				groupInfo.value.customStatus = compareTime(data.start_date, data.end_date);
				// console.log('groupInfo.value.customStatus', groupInfo.value.customStatus);
			}
			if (data.end_date) {
				groupInfo.value.endDate = formatDate(data.end_date);
			}
			if (data.start_date) {
				groupInfo.value.startDate = formatDate(data.start_date);
			}
			groupInfo.value = {
				...groupInfo.value,
				...res.data,
				imageList,
				mainImg: imageList[0]
			};
			signShare(); //注册分享
		} else {
			uni.hideLoading();
			uni.$u.toast(res.msg)
		}
	}
	const signShare = () => { //注册分享
		uni.$mpShare = {
			title: '我有一个优秀的组队',
			path: 'page_main/views/teamDetails?id=' + groupInfo.value.groupId + '&i=' + userInfo.value
				?.invite_code + '&t=1' //t-1 用户
		}
	}
	const getSignList = async () => { //获取名片列表
		const res = await $Api.user.getSignList();
		if (res.code == 1) {
			res.data.list = res.data.list.map(val => {
				if (val.default === 1) { //保存默认的id，默认选中
					signInfo.signId = val.id;
				}
				if (val.mobile) {
					val.newMobile = maskPhoneNumber(val.mobile);
				}
				return val
			})
			signlist.value = res.data.list;
			teamShow.value = true;
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changeTab = (e) => {
		tabIndex.value = e.index;
	}
	const addSign = () => { //添加名片
		uni.navigateTo({
			url: '/page_user/views/personnel'
		})
	}
	const changePayType = (item) => { //切换支付方式
		signInfo.payType = item;
	}
	const changeSwiper = (e) => {
		let {
			current
		} = e.detail;
		tabIndex.value = current;
		if (tabChooseList.includes(current)) return; //判断是否已经加载过了
		tabChooseList.push(current);
		if (current == 1) { //组队成员
			personneInfo.list = [];
			personneInfo.status = 'loadmore';
			personneInfo.pageSize = 1;
			getPersonnelList(true);
		} else if (current == 2) { //评论
			commentInfo.list = [];
			commentInfo.status = 'loadmore';
			commentInfo.pageSize = 1;
			getComment(true);
		}
	};
	const restPersonnelList = () => { //重置人员列表
		personneInfo.list = [];
		personneInfo.status = 'loadmore';
		personneInfo.pageSize = 1;
		getPersonnelList();
		if (tabChooseList.includes(1)) return; //添加已加载标识
		tabChooseList.push(1);
	}
	const getMoreComment = () => { //获取更多评论
		if (commentInfo.status == 'loading' || commentInfo.status == 'nomore') return;
		commentInfo.status = 'loading';
		setTimeout(() => {
			getComment();
		}, 600)
	}
	const delComment = (id) => { //删除评论
		// console.log('delComment', id);
		commentInfo.list = commentInfo.list.filter(val => val.tuc_id !== id)
	}
	const getComment = async (loading) => { //获取评论
		// console.log('groupInfo.value.groupId', groupInfo.value.groupId);
		const res = await $Api.group.commentList({
			tid: groupInfo.value.groupId,
			page: commentInfo.pageSize,
			pid: 0
		}, loading)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				res.data.list.map(val => {
					val.imageList = $manageImg(val.image);
					if (val.ct_date) {
						val.ct_date = formatDate(val.ct_date)
					}
				})
				commentInfo.list = [...commentInfo.list, ...res.data.list, ];
				// console.log('commentInfo.list', commentInfo.list);
			}
			if (res.data.totalPage && res.data.totalPage > commentInfo.pageSize) {
				commentInfo.status = 'loadmore';
				commentInfo.pageSize++;
			} else {
				commentInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const morePersonne = () => { //获取更多评论列表
		if (personneInfo.status == 'loading' || personneInfo.status == 'nomore') return;
		personneInfo.status = 'loading';
		setTimeout(() => {
			getPersonnelList();
		}, 600)
	}
	const getPersonnelList = async (loading) => { //获取组队人员列表
		const res = await $Api.group.personnelList({
			id: groupInfo.value.groupId
		}, loading);
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				res.data.list.map(val => {
					if (val.ct_date) {
						val.ct_date = formatDate(val.ct_date)
					}
					if (!userInfo.value || userInfo.value?.user_id == val.user_id) {
						val.followed = -1;
					}
					if (val.mobile) {
						val.mobile = maskPhoneNumber(val.mobile);
					}
					if (val.team_count > 99) {
						val.team_count = '99+'
					}
				})
				personneInfo.list = [...personneInfo.list, ...res.data.list, ];
				// console.log('personneInfo.list', personneInfo.list);
			}
			if (res.data.totalPage && res.data.totalPage > personneInfo.pageSize) {
				personneInfo.status = 'loadmore';
				personneInfo.pageSize++;
			} else {
				personneInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const previewImage = (list, index) => { //预览图片
		previewImg(list, index);
	}
	const toTeamShow = () => { //去组队
		// teamShow.value = true;
		getSignList();
	}
	const toConfirm = async () => { //确认组队
		uni.showModal({
			title: '提示',
			content: '请确认所有队员已完成核销，再确认结束组队？',
			success: async (res) => {
				if (res.confirm) {
					const res = await $Api.group.confirmEnd({
						id: groupInfo.value.groupId
					})
					if (res.code == 1) {
						uni.showToast({
							title: '确认成功'
						});
						// 重置列表
						setTimeout(() => {
							groupInfo.value.confirm = 1;
						}, 800)
					} else {
						uni.$u.toast(res.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const changeSignId = (id) => { //切换组队名片
		signInfo.signId = id;
	};
	const submitTeam = async () => { //提交支付
		if (signInfo.loading) return;
		if (!checked.value) {
			uni.$u.toast('请先阅读并勾选协议');
			return
		}
		signInfo.loading = true;
		const res = await $Api.order.submitOrder({
			type: 'wechat',
			method: 'miniapp',
			relationId: groupInfo.value.groupId,
			isBalance: signInfo.payType === 'balance' ? 1 : 0,
			signId: signInfo.signId,
			relationType: 'Group',
			orderId: orderInfo.value?.id || 0
		})
		if (res.code == 1) {
			const {
				data
			} = res;
			if (data.is_success && data.is_success == 1) { //不管三七二十一直接过
				uni.showToast({
					title: '支付成功'
				});
				restPersonnelList(); //重置人员列表
				setTimeout(() => {
					signInfo.loading = false;
					teamShow.value = false;
					groupInfo.value.ordered = 1; //组队已支付状态
				}, 800);
				return
			}
			if (data.order) {
				data.order.time_expire = formatDate(data.order.time_expire);
				orderInfo.value = data.order;
				// console.log('orderInfo.value', orderInfo.value);
			}
			if (signInfo.payType === 'balance') { //余额支付
				uni.showToast({
					title: '支付成功'
				});
				restPersonnelList(); //重置人员列表
				allNotification(['groupStart', 'groupClose', 'groupEnd'],
					() => {
						setTimeout(() => {
							signInfo.loading = false;
							teamShow.value = false;
							groupInfo.value.ordered = 1; //组队已支付状态
						}, 600)
					}); //打开通知
			} else { //微信支付
				appPay({
					provider: 'wxpay',
					timeStamp: data.pre_payment.timeStamp,
					nonceStr: data.pre_payment.nonceStr,
					package: data.pre_payment.package,
					signType: data.pre_payment.signType,
					paySign: data.pre_payment.paySign,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '支付成功'
						});
						restPersonnelList(); //重置人员列表
						allNotification(['groupStart', 'groupClose', 'groupEnd'],
							() => {
								setTimeout(() => {
									signInfo.loading = false;
									teamShow.value = false;
									groupInfo.value.ordered = 1; //组队已支付状态
								}, 600)
							}); //打开通知
					} else if (res.code == 100) { //取消支付
						signInfo.loading = false;
						uni.$u.toast('取消支付！');
					}
				}).catch((err) => {
					signInfo.loading = false;
					uni.$u.toast(err);
				})
			}

		} else {
			signInfo.loading = false;
			uni.$u.toast(res.msg)
		}
	}
	const toShare = async () => { //去分享
		let token = uni.getStorageSync('user_token');
		if (!token) {
			uni.$u.toast('请先登录');
			setTimeout(() => {
				toLogin();
			}, 800)
			return
		}
		const res = await $Api.group.getGroupInvite({
			id: groupInfo.value.groupId
		}, true);
		if (res.code == 1) {
			if (res.data.image) {
				groupInfo.value.mpCode = filterBase64(res.data.image);
				if (sharePopup.value) {
					sharePopup.value.toPath();
				}
				shareShow.value = true;
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const filterBase64 = (codeImages) => {
		return 'data:image/png;base64,' + codeImages.replace(/[\r\n]/g, "");
	}
	const closeShare = () => { //关闭分享弹窗
		shareShow.value = false;
	}
	const closeteamShow = () => { //关闭提交组队弹窗
		teamShow.value = false;
	}
	const closeComment = (type) => { //关闭评论弹窗
		if (type == 1) { //发布评论成功，重新获取评论,并且判断已经加载
			restComment();
		}
		commentShow.value = false;
	}
	const restComment = () => { //重置评论列表
		commentInfo.list = [];
		commentInfo.status = 'loadmore';
		commentInfo.pageSize = 1;
		getComment();
		if (tabChooseList.includes(2)) return; //添加已加载标识
		tabChooseList.push(2);
	}
	const shareWechat = () => { //分享微信
	}
	const changeTime = (status) => { //倒计时结束重新计算状态
		groupInfo.value.customStatus = compareTime(groupInfo.value.start_date, groupInfo.value.end_date);
		// groupInfo.value.customStatus = 2;
		console.log('倒计时结束重新计算状态', groupInfo.value.customStatus);
	}
	const consult = () => { //咨询
		uni.showModal({
			title: '提示',
			content: '是否拨打电话咨询？',
			success: function(res) {
				if (res.confirm) {
					uni.makePhoneCall({
						phoneNumber: '18772667' //仅为示例
					});

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}

		})
	}
	const writeoff = () => { //核销
		uni.navigateTo({
			url: '/page_user/views/writeOff'
		})
	}
	const openMap = (latitude = 30.615869, longitude = 104.067839) => { //打开地图
		uni.openLocation({
			latitude: parseFloat(latitude),
			longitude: parseFloat(longitude),
			name: groupInfo.value?.title || '组队地点',
			address: groupInfo.value.address,
			success: function(res) {
				console.log('打开系统位置地图成功')
			},
			fail: function(error) {
				console.log(error)
			}
		})
	}
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login?&i=' + inviteCode.value + '&t=1'
		})
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
	const changeChecked = (e) => {
		checked.value = e;
	}
	const showCode = (code) => { //打开门店核销组队码
		signCode.value = code;
		signCodePop.value = true;
	}
	const closesignCode = () => {
		signCodePop.value = false;
	}
	const saveCode = () => { //保存二维码
		if (upCode.value) {
			upCode.value._saveCode();
		} else {
			uni.$u.toast('保存失败！')
		}
	}
</script>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}
</style>
<style lang="scss" scoped>
	.teamDetails-head {
		position: relative;

		.content-code {
			width: 120rpx;
			height: 120rpx;
			box-sizing: border-box;
			background-color: #fff;
			-webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
			clip-path: polygon(100% 0, 0 100%, 100% 100%);
			z-index: 999;
			position: absolute;
			bottom: 0;
			right: 0;
			// overflow: hidden;

			.code {
				width: 100%;
				height: 100%;
				transform: rotate(90deg);
			}

			.text-box {
				z-index: 999;
				width: 170rpx;
				height: 32rpx;
				background: $btn-bg-color;
				transform: rotate(-45deg);
				text-align: center;
				position: absolute;
				left: -14rpx;
				top: calc(50% - 8rpx);

				.text {
					font-size: 20rpx;
					color: $btn-text-color;

				}
			}
		}
	}

	.swiper {
		width: 100%;
		height: 478rpx;

		.swiper-img-item {
			width: 100%;
			height: 100%;

			.img-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	.main {
		padding: 20rpx;
		// margin-bottom:calc(120 + env(safe-area-inset-bottom))rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.teamDetails-info {
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx 20rpx;
		background-color: #222528;

		.separation {
			width: 100%;
			height: 2rpx;
			background-color: #2F3235;
			margin: 24rpx 0;

		}

		.captain-info {
			.ava {
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
			}

			.captain-name {
				font-weight: bold;
				margin: 0 8rpx 0 16rpx;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
			}

			.captain_sign {
				width: 54rpx;
				height: 30rpx;
			}

			.vip_icon {
				width: 44rpx;
				height: 38rpx;
				margin: 0 4rpx 0 8rpx;
			}

			.lv-name {
				font-weight: bold;
				font-size: 20rpx;
				color: #FFE4A3;
			}
		}
	}

	.address-info-box {
		position: relative;
		margin: 18rpx 0 0rpx 0;
		z-index: 9;
		width: 100%;
		height: 120rpx;

		.address-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.address-info {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: rgba(34, 37, 40, 0.8);
		justify-content: space-between;

		.address-icon {
			transform: translateY(8rpx);
		}

		.address-left {
			align-items: flex-start;
		}

		.address-box {
			flex-direction: column;
			margin-left: 10rpx;

			.address {
				font-weight: bold;
				font-size: 28rpx;
				color: #B8DED0;
				margin-bottom: 8rpx;
			}

			.distance {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #7F998F;
			}
		}

		.address-btn {
			width: 56rpx;
			height: 56rpx;
			flex-shrink: 0;
		}
	}

	.tab-box {
		width: 100%;
		height: 88rpx;
		background-color: $page-bg-color;
	}

	.footer-box {
		position: fixed;
		width: 750rpx;
		bottom: 0;
		height: 112rpx;
		background-color: #191C1F;
		border-top: 2rpx solid #303335;
		padding-bottom: env(safe-area-inset-bottom);

		.footer-content-logOut {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
		}

		.footer-content {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
			background-color: #191C1F;
			justify-content: space-between;
		}
	}

	.marl {
		margin-left: 26rpx;
	}

	.share-box {
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 22rpx;
			color: #DEDEDE;
			margin-top: 6rpx;
		}
	}

	.price-box {
		color: #7CDED4;
		font-weight: bold;

		.icon {
			font-size: 28rpx;
		}

		.price {
			font-size: 44rpx;
			margin-left: 6rpx;
		}

		.unit {
			font-size: 16rpx;
		}
	}

	.team-btn {
		width: 216rpx;
		height: 72rpx;
		margin-left: 24rpx;
		border-radius: 36rpx;
		background: $btn-bg-color;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);

		.btn-text {
			color: #186059;
			font-size: 30rpx;
			font-weight: bold;

		}
	}

	.team-btn-free {
		width: 216rpx;
		height: 72rpx;
		margin-left: 24rpx;
		border-radius: 36rpx;
		background: $free-btn-bg-color;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);

		.btn-text {
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;

		}
	}

	.team-btn-nostart {
		width: 216rpx;
		height: 72rpx;
		margin-left: 24rpx;
		border-radius: 36rpx;
		background: $no-active-color;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);

		.btn-text {
			color: $noActive-text-color;
			font-size: 30rpx;
			font-weight: bold;

		}
	}

	.content-box {
		display: flex;
		// height: calc(100vh - 112rpx - env(safe-area-inset-bottom));
		height: 100vh;
		flex-direction: column;
		overflow: hidden;
		padding: 20rpx;
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
	}

	.tab-content {
		box-sizing: border-box;
		flex-grow: 1;

		.swiper-content {
			height: 100%;

			.swiper-content-item {
				height: 100%;
			}
		}
	}



	.teamDetails-content-item {
		width: 100%;
		box-sizing: border-box;
		border-radius: 12rpx;
		padding: 20rpx;
		background-color: #222528;
		display: flex;
		flex-direction: column;

		.title {
			color: $name-color;
			font-size: 32rpx;
			// margin-bottom: 24rpx;
			display: block;
		}

		.text-description {
			font-weight: 400;
			font-size: 28rpx;
			color: $description-color;
			line-height: 56rpx;
			margin-top: 24rpx;
		}

		.personner-item {
			&:not(:last-child) {
				margin-bottom: 40rpx;
			}
		}



		.teamDetails-img {
			width: 100%;
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto auto;
			gap: 8rpx;

			.img {
				width: 218rpx;
				height: 196rpx;
				border-radius: 12rpx;
			}
		}


	}

	.teamDetails-item-review {
		width: 100%;
		box-sizing: border-box;
		border-radius: 12rpx;
	}

	.choose-sign {
		padding: 36rpx;
		height: 80vh;
		flex-direction: column;
		flex-direction: column;
		background-color: #222528;
		border-radius: 18rpx 18rpx 0 0;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
		}

		.choose-content {
			flex: 1;
			margin: 24rpx 0;
			overflow: hidden;

			.sign-item {
				padding: 20rpx 0;

				&:not(:last-child) {
					border-bottom: 1rpx solid #373B3E;
				}
			}
		}

		.radio-box {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 1rpx solid #ccc;
			margin-right: 18rpx;
			box-sizing: border-box;
		}

		.radio-box-active {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background-color: #7EDE9E;
			margin-right: 18rpx;
		}

		.choseSign-footer {
			flex-direction: column;
		}

		.choseSign-footer-btn {
			// justify-content: space-between;
			height: 72rpx;
		}

		.add_box {
			width: 180rpx;
			height: 42rpx;
			border-radius: 21rpx;
			border: 2rpx solid $btn-plain-color;
			margin: 0 auto;
			margin-top: 36rpx;

			.text {
				font-size: 26rpx;
				color: $btn-plain-color;
				margin-left: 12rpx;
			}
		}

		.personnel-left {
			flex-shrink: 0;
		}

		.personnel-right {
			margin-left: 24rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.personnel-head {
			width: 100%;
			justify-content: space-between;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: $title-color;
				margin-right: 12rpx;
			}
		}

		.phone {
			color: $description-color;
			font-size: 28rpx;
			margin-top: 18rpx;
		}

		.status-box {
			width: 96rpx;
			height: 48rpx;
			border-radius: 12rpx;
			border: 1rpx solid $attention-color;
			color: $attention-color;

			.text {
				color: $attention-color;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}

	.agreement-box {
		width: 100%;
		margin: 16rpx 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}

	// 签到码弹出层
	.signCode-box {
		// width: 480rpx;
		padding: 24rpx;
		box-sizing: border-box;
		flex-direction: column;

		.title {
			font-size: 30rpx;
			color: $name-color;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.code-box {
			padding: 16rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}

		.option-box {
			margin-top: 36rpx;
			width: 100%;
			justify-content: space-evenly;

			.option-btn {
				width: 100%;
				height: 48rpx;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 24rpx;
				background: $btn-bg-color;

				.text {
					font-weight: 600;
					font-size: 26rpx;
					color: $btn-text-color;

				}
			}
		}
	}
</style>